import React, { useState } from "react";
import * as XLSX from "xlsx";
import axios from "axios";
import { useSortBy, useTable } from "react-table";
import "./App.css";

const yFinanceHeaders = {
   "X-RapidAPI-Key": "3b7f2f0b00mshda571848e6384b5p1a730djsn44d128fbf2af",
   "X-RapidAPI-Host": "yahoo-finance127.p.rapidapi.com",
};

const YFinance2Headers = {
   'X-RapidAPI-Key': '3b7f2f0b00mshda571848e6384b5p1a730djsn44d128fbf2af',
   'X-RapidAPI-Host': 'apidojo-yahoo-finance-v1.p.rapidapi.com'
 };

const prepApiKey = '4015a89da221219946dbffd2238a7fdc';

const columns = [
   {
      Header: "Stock Symbol",
      accessor: "symbol",
      Cell: ({ value }) =>
         typeof value === "number" ? value.toFixed(2) : value,
   },
   {
      Header: "Stock Price",
      accessor: "regularMarketPrice",
      Cell: ({ value }) =>
         typeof value === "number" ? value.toFixed(2) : value,
   },
   {
      Header: "Trailing P/E",
      accessor: "trailingPE",
      Cell: ({ value }) =>
         typeof value === "number" ? value.toFixed(2) : value,
   },
   {
      Header: "Forward P/E",
      accessor: "forwardPE",
      Cell: ({ value }) =>
         typeof value === "number" ? value.toFixed(2) : value,
   },
   {
      Header: "Price/Book",
      accessor: "priceToBook",
      Cell: ({ value }) =>
         typeof value === "number" ? value.toFixed(2) : value,
   },
   {
      Header: "+1Y EPS Growth",
      accessor: "nextYearEPSGrowth",
      Cell: ({ value }) =>
         typeof value === "number" ? toPercentStr(value) : value,
   },
   {
      Header: "Dividend Yield",
      accessor: "trailingAnnualDividendYield",
      Cell: ({ value }) =>
         typeof value === "number" ? toPercentStr(value) : value,
   },
   {
      Header: "Rev Growth",
      accessor: "revenueGrowth",
      Cell: ({ value }) =>
         typeof value === "number" ? toPercentStr(value) : value,
   },
   {
      Header: "+1Y Rev Growth",
      accessor: "nextYearRevenueGrowth",
      Cell: ({ value }) =>
         typeof value === "number" ? toPercentStr(value) : value,
   },
   {
      Header: "3Y Rev Growth",
      accessor: "threeYRevenueGrowth",
      Cell: ({ value }) =>
         typeof value === "number" ? toPercentStr(value) : value,
   },
   {
      Header: "3Y Shares Growth",
      accessor: "threeYSharesGrowth",
      Cell: ({ value }) =>
         typeof value === "number" ? toPercentStr(value) : value,
   },
   {
      Header: "3Y Equity Growth",
      accessor: "threeYEquityGrowth",
      Cell: ({ value }) =>
         typeof value === "number" ? toPercentStr(value) : value,
   },
];

function toPercentStr(val) {
   return (val * 100).toFixed(2) + '%';
}

function StockTable({ data }) {
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
      useTable({ columns, data }, useSortBy);

   const cellStyle = (cell) => {
      const isGrowthColumn = cell.column.id.endsWith("Growth");
      const value = parseFloat(cell.value);
   
      if (isGrowthColumn && value > 0.1) {
         return { backgroundColor: "#c6f2c6" };
      } else if (value < 0) {
         return { backgroundColor: "#fdd1d1" };
      } else {
         return {};
      }
   }

   return (
      <table {...getTableProps()} style={{ width: "100%" }}>
         <thead>
            {headerGroups.map((headerGroup) => (
               <tr {...headerGroup.getHeaderGroupProps()}>
                  {headerGroup.headers.map((column) => (
                     <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                        {column.render("Header")}
                        <span>
                           {column.isSorted ? (column.isSortedDesc ? " 🔼" : " 🔽") : ""}
                        </span>
                     </th>
                  ))}
               </tr>
            ))}
         </thead>
         <tbody {...getTableBodyProps()}>
            {rows.map((row) => {
               prepareRow(row);
               return (
                  <tr {...row.getRowProps()}>
                     {row.cells.map((cell) => {
                        return (
                        <td {...cell.getCellProps()} 
                           style={cellStyle(cell)}
                        >{cell.render("Cell")}</td>
                        )})}
                  </tr>
               );
            })}
         </tbody>
      </table>
   );
}

function App() {
   const [inputValue, setInputValue] = useState("");
   const [stockData, setStockData] = useState([]);
   

   async function fetchMultiQuoteData(data) {
      return await Promise.all(
         data.map(async (stock) => {
            const symbol = stock.symbol.toLowerCase();
            const options = {
               method: 'GET',
               url: `https://yahoo-finance127.p.rapidapi.com/key-statistics/${symbol}`,
               headers: yFinanceHeaders
               };
            try {
               const response = await axios.request(options);
               stock.priceToBook = response.data.priceToBook.raw;
               console.log('yFinance1 Response', response.data)

               return stock;
            } catch (error) {
               console.error(error);
               return stock;
            }
         })
      );
   }

   async function updateDataWithRevenueGrowth(data) {
      return await Promise.all(
         data.map(async (stock) => {
            const symbol = stock.symbol.toUpperCase();
            const options = {
               method: 'GET',
               url: 'https://apidojo-yahoo-finance-v1.p.rapidapi.com/stock/v2/get-analysis',
               params: {symbol: symbol, region: 'US'},
               headers: YFinance2Headers
               };

            try {
               const response = await axios.request(options);
               console.log('yFinance2 Response', response);

               const revenueEstimate1Y = response.data.earningsTrend.trend.filter(elem => elem.period === "+1y")[0].revenueEstimate;
               const nextYearRevenue1Y = revenueEstimate1Y.avg.raw;
               const currYearRevenue1Y = revenueEstimate1Y.yearAgoRevenue.raw;
               const revenueGrowth1Y = (nextYearRevenue1Y / currYearRevenue1Y) - 1;
               stock.nextYearRevenueGrowth = revenueGrowth1Y;

               const revenueEstimate0Y = response.data.earningsTrend.trend.filter(elem => elem.period === "0y")[0].revenueEstimate;
               const nextYearRevenue0Y = revenueEstimate0Y.avg.raw;
               const currYearRevenue0Y = revenueEstimate0Y.yearAgoRevenue.raw;
               const revenueGrowth0Y = (nextYearRevenue0Y / currYearRevenue0Y) - 1;
               stock.revenueGrowth = revenueGrowth0Y;

               stock.regularMarketPrice = response.data.price.regularMarketPrice.raw;
               stock.trailingAnnualDividendYield = response.data.summaryDetail.trailingAnnualDividendYield.raw;
               
               const epsPastYear = response.data.earningsHistory.history.reduce((prev, curr) => {
                  return prev + curr.epsActual.raw;
               }, 0)

               stock.trailingPE = stock.regularMarketPrice / epsPastYear;

               stock.forwardPE = stock.regularMarketPrice / response.data.earningsTrend.trend.filter(elem => elem.period === "0y")[0].earningsEstimate.avg.raw;


               stock.nextYearEPSGrowth = response.data.earningsTrend.trend.filter(elem => elem.period === "+1y")[0].earningsEstimate.growth.raw;

               return stock;
            } catch (error) {
               console.error(error);
               return stock;
            }
         })
      );
   }

   async function updateDataWithModelingSiteParams(data) {
      return await Promise.all(
         data.map(async (stock) => {
            const symbol = stock.symbol.toUpperCase();
            const optionsStatements = {
               method: "GET",
               url: `https://financialmodelingprep.com/api/v3/income-statement/${symbol}?limit=4&apikey=${prepApiKey}`,
            };
            const optionsBSheet = {
               method: "GET",
               url: `https://financialmodelingprep.com/api/v3/balance-sheet-statement/${symbol}?limit=4&apikey=${prepApiKey}`,
            };

            try {
               const responseStatements = await axios.request(optionsStatements);
               
               const threeYRevenueGrowth = Math.pow(responseStatements.data[0].revenue / responseStatements.data[3].revenue, 1/3) - 1;
               const threeYSharesGrowth = Math.pow(responseStatements.data[0].weightedAverageShsOutDil / responseStatements.data[3].weightedAverageShsOutDil, 1/3) - 1;
               stock.threeYRevenueGrowth = threeYRevenueGrowth;
               stock.threeYSharesGrowth = threeYSharesGrowth;
               
               const responseBSheet = await axios.request(optionsBSheet);
               const threeYEquityGrowth = Math.pow(responseBSheet.data[0].totalEquity / responseBSheet.data[3].totalEquity, 1/3) - 1;
               stock.threeYEquityGrowth = threeYEquityGrowth;

               return stock;
            } catch (error) {
               console.error(error);
            }
         })
      );
   }

   function getStocksArray(stocksStr) {
      return stocksStr.toLowerCase().split(" ").filter(symbolStr => symbolStr.length > 0);
   }

   async function fetchStockData(stocksArray) {
      const emptyData = stocksArray.map(stock => {return {symbol: stock}});
      console.log('emptyData', emptyData);

      const data = await fetchMultiQuoteData(emptyData);
      console.log('multiQuoteData', data);

      const dataWithRevenueGrowth = await updateDataWithRevenueGrowth(data);
      console.log('dataWithRevenueGrowth', dataWithRevenueGrowth);

      const dataWithModelingSiteParams = await updateDataWithModelingSiteParams(dataWithRevenueGrowth);
      console.log('dataWithModelingSiteParams', dataWithModelingSiteParams);

      setStockData(dataWithModelingSiteParams);
   }

   function exportToExcel(data) {
      const fileType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
      const fileExtension = ".xlsx";
    
      const filteredData = data.map(stock => ({
        symbol: stock.symbol,
        price: stock.regularMarketPrice,
        trailingPE: stock.trailingPE,
        forwardPE: stock.forwardPE,
        priceToBook: stock.priceToBook,
        revenueGrowth: stock.revenueGrowth * 100,
        nextYearEPSGrowth: stock.nextYearEPSGrowth * 100,
        dividendYield: stock.trailingAnnualDividendYield * 100,
        threeYearRevenueGrowth: stock.threeYRevenueGrowth * 100,
        threeYearSharesGrowth: stock.threeYSharesGrowth * 100
      }));
    
      const ws = XLSX.utils.json_to_sheet(filteredData);
      const wb = { Sheets: { data: ws }, SheetNames: ["data"] };
      const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
      const dataBlob = new Blob([excelBuffer], { type: fileType });
    
      const url = window.URL.createObjectURL(dataBlob);
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", `stock_data${fileExtension}`);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }    

   return (
      <div className="container">
         <h1>Stock Information</h1>
         <span>Please enter your desired stocks separated by commas:</span>
         <form
            onSubmit={(e) => {
               e.preventDefault();
               const stocksArray = getStocksArray(inputValue);
               fetchStockData(stocksArray);
               setInputValue("");
            }}
         >
            <input
               type="text"
               value={inputValue}
               onChange={(e) => setInputValue(e.target.value)}
               placeholder={`aapl, msft, tsla`}
            />
            <button type="submit">Get Stocks Data</button>
         </form>
         <StockTable data={stockData} />
         <img alt="" src="./excel.svg" onClick={() => exportToExcel(stockData)}></img>
      </div>
   );
}

export default App;
